<template>
	<view class="indexbox">
		<qi-navtabbar><view slot="center">首页</view></qi-navtabbar>
		<tabControl
			:titles="['默认', '推荐', '最新']"
			@tabClick="changeSort"
			ref="tabControl1"
		/>
		<scroll-view
			ref="refScrolltop"
			:scroll-top="windsessionStorageScroll.num"
			scroll-y
			class="scrollheight"
			@scrolltolower="tolower"
			@scroll="refscroll"
		>
			<view
				class="iconfont icon-qudingbu  back-top"
				v-show="isShow"
				@tap="TapclickNavback"
			></view>
			<!-- 轮播图 -->
			<u-swiper
				:list="bannerList"
				name="img_url"
				height="300"
			></u-swiper>

			<!-- 商品列表 -->
			<goods-card :booklist="showGoods"></goods-card>
			<qi-tolower>
				<view v-if="!isLastPage">加载中。。。</view>
			</qi-tolower>
		</scroll-view>
	</view>
</template>

<script>
import badgeMix from '@/mixins/tabbar-badge.js';
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
export default {
	mixins: [badgeMix],
	name: 'Index',

	data() {
		return {
			bannerList: [],
			// 返回的按钮是否显示
			isShow: false,
			// 返回顶部的标记点
			topItem: '',
			scrollTop: 0,
			isFixedTop: false,
			tabIndex: 0,
			windsessionStorageScroll: { num: '', type: '' },
			// placeholder: [{}, {}, {}, {}],
			currentIndex: 0,
			loading: false,
			bookList: [],
			page: 1,
			isshowtabControl: true,
			currentType: 'sales',
			isLastPage: false,
			goods: {
				sales: { page: 0, data: [] },
				recommend: { page: 0, data: [] },
				new: { page: 0, data: [] }
			}
		};
	},
	computed: {
		...mapState('m_home', ['vuexhomenavtop']),
		showGoods() {
			return this.goods[this.currentType].data;
		}
	},
	onLoad() {
		// 请求商品数据
		this.getInitData('sales');
		// this.getInitData('recommend');
		// this.getInitData('new');
	},
	// 在页面离开的时候调用就可以了
	onUnload() {
		this.clear();
	},
	methods: {
		...mapMutations('m_home', ['homeincrement', 'clear']),
		...mapActions('m_home', ['addDataListCart']),

		// 获取首页数据
		async getInitData(type) {
			// uni.showToast({
			// 	title: '加载中……',
			// 	icon: 'loading',
			// 	duration: 2000 // 当然这个时间可根据实用场景进行相关设置
			// });
			const params = {};
			params.page = this.goods[type].page + 1;
			// 判断currentIndex添加不同的筛选参数
			if ('sales' == type) {
				params.sales = '1';
			} else if ('recommend' == type) {
				params.recommend = '1';
			} else if ('new' == type) {
				params.new = '1';
			}
			// 请求数据
			let res = await this.$u.api.getIndexData(params);
			if (Object.keys(res.goods.data).length !== 0) {
				// 保存图书商品数据(合并新数据与上次数据包)
				this.goods[type].data.push(...res.goods.data);
				// 保存轮播图列表
				this.bannerList = res.slides;
				// 判断当前数据是否存在下一页
				this.isLastPage = res.goods.next_page_url ? false : true;
				this.goods[type].page += 1;
			console.log(this.goods);
				// uni.hideToast();
				// 数据处理完毕，关闭骨架屏
				// this.loading = false;
				// uni.hideToast();
			}
		},
		onSwitchTab(index) {
			switch (index) {
				case 0:
					this.currentType = 'sales';
					break;
				case 1:
					this.currentType = 'recommend';
					break;
				case 2:
					this.currentType = 'new';
					break;
			}
			if (this.goods[this.currentType].data.length === 0) {
				this.getInitData(this.currentType);
			}

			let scoltop = this.vuexhomenavtop.find(
				x => x.type == this.currentType
			) || { num: 0, type: '' };
			this.$nextTick(() => {
				this.windsessionStorageScroll = scoltop;
			});
		},
		// 切换tab排序
		changeSort(index) {
			this.$u.debounce(this.toNext(index), 50);
		},
		toNext(index) {
			if (this.tabIndex === index) return;
			let scoltop = {
				type: this.currentType,
				num: this.scrollTop.toFixed(2)
			};
			this.addDataListCart(scoltop);
			this.tabIndex = index;
			this.onSwitchTab(index);
		},
		// 回顶部
		TapclickNavback() {
			this.windsessionStorageScroll.num = this.scrollTop;
			this.$nextTick(() => {
				this.windsessionStorageScroll.num = 0;
			});
		},
		// 触底
		tolower() {
			// 如果未到底页
			if (!this.isLastPage) {
				// this.page += 1;
				// uni.showToast({
				// 	title: '加载中……',
				// 	icon: 'loading',
				// 	duration: 2000 // 当然这个时间可根据实用场景进行相关设置
				// });
				this.getInitData(this.currentType);
			} else {
				this.$u.toast('没有更多数据了');
			}
		},
		// 滚动
		refscroll(e) {
			this.scrollTop = e.detail.scrollTop;
			e.detail.scrollTop > 600
				? (this.isShow = true)
				: (this.isShow = false);
		}
		// 触底加载下一页商品数据
		// onReachBottom() {
		// 	// 如果未到底页
		// 	if (!this.isLastPage) {
		// 		this.page += 1;
		// 		this.getInitData(this.currentType);
		// 	} else {
		// 		this.$u.toast('没有更多数据了');
		// 	}
		// }
	}
};
</script>

<style lang="scss" scoped>
.scrollheight {
	height: calc(100vh - 100px - var(--window-bottom));
	// #ifdef MP
	height: calc(100vh - 100px - var(--window-bottom) - 20px);
	// #endif
	// .tabnav{
	// 	position: sticky;
	// 	top: 200rpx;
	// 	z-index: 99;
	// //
	// }
	.back-top {
		height: 40px;
		width: 40px;
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, 0.4);
		position: fixed;
		bottom: 100px;
		right: 20rpx;
		text-align: center;
		line-height: 40px;
		z-index: 99;
		font-size: 24rpx;
		// background-image:('@/static/logo.png');
	}
}
</style>
